<template>
  <view class="steps-container">
    <view class="steps">
      <view 
        v-for="(step, index) in steparr" 
        :key="index"
        :class="['step-item', index <= 5 ? 'active' : '']"
      >
        <view class="step-index">{{ index + 1 }}</view>
        <view class="step-content">
          <text class="step-title">{{ step.title }}</text>
          <!-- <text class="step-desc">{{ step.content }}</text> -->
        </view>
        <view class="step-line" v-if="index < steparr.length - 1"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useCounterStore } from "@/stores/counter";
const st = useCounterStore();
const steparr = st.steparr;
</script>

<style lang="scss" scoped>
.steps-container {
  padding: 30rpx;
}

.steps {
  display: flex;
  position: relative;
}

.step-item {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  &.active {
    .step-index {
      background: var(--td-brand-color);
      color: #fff;
    }
    
    .step-line {
      background: var(--td-brand-color);
    }
    
    .step-title {
      color: var(--td-brand-color);
    }
  }
}

.step-index {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  background: #f5f5f5;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  margin-bottom: 16rpx;
  position: relative;
  z-index: 1;
}

.step-content {
  text-align: center;
}

.step-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.step-desc {
  font-size: 24rpx;
  color: #999;
}

.step-line {
  position: absolute;
  top: 22rpx;
  left: 50%;
  width: 100%;
  height: 2rpx;
  background: #f5f5f5;
}
</style>
